@import './css/switchTheme';
$lightPrimary: #eba0b3;
$lightSuccess: #add5a2;
$lightWarning: #f7e8aa;
$lightError: #f17666;
$lightAlert: #c8adc4;
button {
  outline: 0;
}
.LunaRipple {
  position: absolute;
  border-radius: 100%;
  background-clip: padding-box;
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transform: scale(0);
  -ms-transform: scale(0);
  transform: scale(0);
  opacity: 1;
  margin: 0 !important;
  @include background('opacityBackground');
}
.LunaRipple.z-active {
  opacity: 0;
  -webkit-transform: scale(2);
  -ms-transform: scale(2);
  transform: scale(2);
  transition: opacity 1s cubic-bezier(0.42, 0, 0.58, 1), transform 1s cubic-bezier(0.42, 0, 0.58, 1);
}
.LunaButton {
  @include background('normalBackground');
  @include normalBoxShadow('longBoxShadow');
  @include normalText('normalText');
  width: 120px;
  height: 48px;
  border-radius: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.1);
  position: relative;
  cursor: pointer;
  font-size: 16px;
  > span {
    margin-left: 8px;
  }
  &.LunaSuffixButton > span {
    margin-left: 0;
    margin-right: 8px;
  }
  &.LunaDisableButton {
    background: #ccc !important;
    color: #999 !important;
    cursor: no-drop !important;
    box-shadow: none !important;
  }
  &.LunaPrimaryButton {
    background: $primary;
    box-shadow: 0 22px 48px 0 $lightPrimary;
    color: #fff;
  }
  &.LunaLightPrimaryButton {
    @include background('lightPrimaryBackground');
    box-shadow: 0 22px 88px 0 $lightPrimary;
  }
  &.LunaSuccessButton {
    background: $success;
    box-shadow: 0 22px 48px 0 $lightSuccess;
    color: #fff;
  }
  &.LunaLightSuccessButton {
    @include background('lightSuccessBackground');
    box-shadow: 0 22px 88px 0 $lightSuccess;
  }
  &.LunaWarningButton {
    background: $warning;
    box-shadow: 0 22px 48px 0 $lightWarning;
    color: #fff;
  }
  &.LunaLightWarningButton {
    @include background('lightWarningBackground');
    box-shadow: 0 22px 88px 0 $lightWarning;
  }
  &.LunaErrorButton {
    background: $error;
    box-shadow: 0 22px 48px 0 $lightError;
    color: #fff;
  }
  &.LunaLightErrorButton {
    @include background('lightErrorBackground');
    box-shadow: 0 22px 88px 0 $lightError;
  }
  &.LunaAlertButton {
    background: $alert;
    box-shadow: 0 22px 48px 0 $lightAlert;
    color: #fff;
  }
  &.LunaLightAlertButton {
    @include background('lightAlertBackground');
    box-shadow: 0 22px 88px 0 $lightAlert;
  }
  &.LunaFabButton {
    width: 88px;
    height: 88px;
    border-radius: 24px;
    font-size: 12px;
    display: flex;
    flex-direction: column;
    span {
      margin-top: 8px;
    }
  }
  &.LunaTextButton {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    color: $primary;
    .LunaRipple {
      @include background('lightPrimaryBackground');
    }
    &.LunaPrimaryButton,
    &.LunaLightPrimaryButton {
      color: $primary;
      .LunaRipple {
        @include background('lightPrimaryBackground');
      }
    }
    &.LunaSuccessButton,
    &.LunaLightSuccessButton {
      color: $success;
      .LunaRipple {
        @include background('lightSuccessBackground');
      }
    }
    &.LunaWarningButton,
    &.LunaLightWarningButton {
      color: $warning;
      .LunaRipple {
        @include background('lightWarningBackground');
      }
    }
    &.LunaErrorButton,
    &.LunaLightErrorButton {
      color: $error;
      .LunaRipple {
        @include background('lightErrorBackground');
      }
    }
    &.LunaAlertButton,
    &.LunaLightAlertButton {
      color: $alert;
      .LunaRipple {
        @include background('lightAlertBackground');
      }
    }
  }
  &.LunaOutlineButton {
    background: transparent !important;
    box-shadow: none !important;
    border: 1px solid $primary;
    color: $primary;
    .LunaRipple {
      @include background('lightPrimaryBackground');
    }
    &.LunaPrimaryButton,
    &.LunaLightPrimaryButton {
      border: 1px solid $primary;
      color: $primary;
      .LunaRipple {
        @include background('lightPrimaryBackground');
      }
    }
    &.LunaSuccessButton,
    &.LunaLightSuccessButton {
      border: 1px solid $success;
      color: $success;
      .LunaRipple {
        @include background('lightSuccessBackground');
      }
    }
    &.LunaWarningButton,
    &.LunaLightWarningButton {
      border: 1px solid $warning;
      color: $warning;
      .LunaRipple {
        @include background('lightWarningBackground');
      }
    }
    &.LunaErrorButton,
    &.LunaLightErrorButton {
      border: 1px solid $error;
      color: $error;
      .LunaRipple {
        @include background('lightErrorBackground');
      }
    }
    &.LunaAlertButton,
    &.LunaLightAlertButton {
      border: 1px solid $alert;
      color: $alert;
      .LunaRipple {
        @include background('lightAlertBackground');
      }
    }
  }
}
